<template>
  <div>
    <h2>用户列表</h2>
    <el-button type="primary" @click="totianjia()">添加</el-button>

    <el-dialog title="添加" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="用户名" >
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户账号" >
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户密码" >
          <el-input v-model="form.passwords" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-select v-model="form.sex" placeholder="请选择">
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="头像" >
          <el-upload
            class="avatar-uploader"
            action="http://localhost:6001/my/mypage/fileUpload"
            name="file"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="手机号" >
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="tianjia()">确 定</el-button>
      </div>
    </el-dialog>
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        fixed
        prop="stu_id"
        label="ID">
      </el-table-column>
      <el-table-column
        prop="name"
        label="用户名">
      </el-table-column>
      <el-table-column
        prop="username"
        label="用户账号">
      </el-table-column>
      <el-table-column
        prop="passwords"
        label="用户密码">
      </el-table-column>
      <el-table-column
        prop="sex"
        label="性别">
        <template slot-scope="scope">
          {{scope.row.sex==1?'男':'女'}}
          </template>
      </el-table-column>
      <el-table-column label="商品图片" align="center" prop="imgs" width="100">
        <template slot-scope="scope">
          <img :src="scope.row.imgs" :width="50" :height="50"/>
        </template>
      </el-table-column>
      <el-table-column
        prop="phone"
        label="手机号"
        width="120">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

import axios from "axios";
export default {
  data() {
    return {
      tableData: [],
      imageUrl: '',
      form:{
        imgs:'',
      },
      dialogFormVisible:false
    };
  },
  created() {
    this.findUsersList();
  },
  methods: {
    tianjia(){
      this.form.imgs=this.imageUrl;
      axios.post('/my/mypage/addUser',this.form).then(res=>{
        console.log(res)
        this.findUsersList();
        this.dialogFormVisible=false;
      })
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = res;
    },
    beforeAvatarUpload(file) {
      return null;
    },
    findUsersList(){
      axios.post('my/mypage/findUsersList').then(res=>{
        console.log(res)
        this.tableData=res.data;
      })
    },
    totianjia(){
      this.dialogFormVisible=true;
    }
  },
};
</script>

<style >
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader{
  text-align: left;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
  border: 1px solid #d9d9d9;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
